import React, { Component } from 'react';
import { Table, Breadcrumb, DatePicker, Button, Pagination} from 'antd'
import DateSearch from '../../../components/DateSearch/index'
import styles from './TableDetailsList.less'

const { RangePicker} = DatePicker;

const payType = (item) => {
  if(item == 1){
    return <span>支付宝</span>
  }else if(item == 2){
    return <span>现金</span>
  }else if(item == 3){
    return <span>微信</span>
  }
}

const moneyType = (item) => {
  if(item == 1){
    return <span>消费金</span>
  }else if(item == 2){
    return <span>福利金</span>
  }else if(item == 3){
    return <span>积分</span>
  }else if(item == 4){
    return <span>礼券</span>
  }
}

const getuseType = (type) => {
  switch(type) {
    case 1: return <span>线下充值</span> ; break;
    case 2: return <span>兑换积分</span>; break;
    case 3: return <span>转福利金</span> ;break;
    case 4: return <span>转消费金</span>; break;
    case 5: return <span>利息</span>;break;
    case 6: return <span>粉丝充值</span>; break;
    case 7: return <span>邀请好友</span>; break;
    case 8: return <span>系统自动结转</span>; break;
    case 9: return <span>线下支付</span>; break;
    case 10: return <span>线下收款</span>; break;
    case 11: return <span>线上支付</span>; break;
    case 12: return <span>线上收款</span>; break;
    case 13: return <span>线上充值</span>; break;
  }
}
const columns = [
  {
    title: '时间',
    dataIndex: 'createTime',
    key: '1',
    width:"18%"
  },
  {
    title: '货币类型',
    dataIndex: 'type',
    key: '2',
    width:"8%",
    render:(text)=>{
      return(moneyType(text))
   }
  },
  {
    title: '用途',
    dataIndex: 'useType',
    key: '3',
    width:"10%",
    render:(text)=>{
      return(getuseType(text))
    }
  },
  {
    title: '消费金',
    dataIndex: 'money',
    key: '4',
    width:"7%",
    render:(text)=>{
      return(<span>{text ? text : '0'}</span>)
   }
  },
  {
    title: '福利金',
    dataIndex: 'welfare',
    key: '5',
    width:"7%",
    render:(text)=>{
      return(<span>{text ? text : '0'}</span>)
   }
  },
  {
    title: '积分',
    dataIndex: 'bonouse',
    key: '6',
    width:"7%",
    render:(text)=>{
      return(<span>{text ? text : '0'}</span>)
   }
  },
  {
    title: '礼券',
    dataIndex: 'gift',
    key: '7',
    width:"7%",
    render:(text)=>{
      return(<span>{text ? text : '0'}</span>)
   }
  },
  {
    title: '支付方式',
    dataIndex: 'payType',
    key: '8',
    width:"8%",
    render:(text)=>{
       return(payType(text))
    }
  },
  {
    title: '账户余额',
    dataIndex: 'record',
    key: '9',
    width:"20%",
    render:(text, record) => {
      return(
        <div className={styles.record}>
          <ul>
            <li><span>消费金:</span><span>{record.currentMoney}</span></li>
            <li><span>福利金:</span><span>{record.currentWelfare}</span></li>
            <li><span>积分:</span><span>{record.currentBonous}</span></li>
            <li><span>礼券:</span><span>{record.currentGift}</span></li>
          </ul>
        </div>
      )

    }
  },
];

class TableDetailsList extends Component {
  render() {
    const { vipDetailsItem ,loading} = this.props
    const { buyerName, list , totalElements} = vipDetailsItem

    // const rowSelection = {
    //   onChange: (selectedRowKeys, selectedRows) => {
    //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //   },
    //   getCheckboxProps: record => ({
    //     disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   }),
    // };
    return (
      <div className={styles.vip_TableDetailsList}>
        <Breadcrumb separator=">" style={{fontSize:'16px'}}>
          <Breadcrumb.Item onClick={this.props.onGetList} style={{cursor:'pointer'}}>会员列表</Breadcrumb.Item>
          <Breadcrumb.Item><b>明细</b></Breadcrumb.Item>
        </Breadcrumb>
        <div className={styles.details_header}>
          <ul>

            <li><span>会员名称:</span><span>{buyerName && buyerName}</span></li>
            <li>
              <ul>
                <li style={{float:'left'}}>
                   <DateSearch onChangeDate={this.props.onChangeDate} />
                </li>
                <li style={{float:'left',marginLeft:'20px'}}><Button type="primary" size="large" onClick={this.props.onDetailsTimeSearch} >搜索</Button></li>
              </ul>
            </li>

          </ul>
        </div>
        <Table  bordered
        columns={columns}
        loading={loading}
        dataSource={list}/>
        <Pagination defaultCurrent={1} total={ totalElements ? Number(totalElements) : 1} onChange={this.props.onDetailsPage}  style={{float:'right',marginTop:'20px'}}/>
      </div>
    );
  }
}

export default TableDetailsList;




